 <template>
  <div style="width: 100%" class="login-container" id="app">
    <el-row :gutter="20">
      <el-col :span="14" :offset="0">
        <p style="text-align: center">
          <img
            src="./img/MES.png"
            alt="logo"
            style="width: 630px; height: 550px"
            class="logo-img"
          />
        </p>
      </el-col>
      <el-col :span="10" :offset="0">
        <h1 style="font-weight: bold; font-size: 20pt">
          ERP&MES生产制造管理综合系统
        </h1>
        <br /><br />
        <el-form
          :inline="true"
          :model="formInline"
          label-width="100px"
          class="demo-form-inline"
        >
          <el-form-item prop="user_Name">
            <el-input
              v-model="formInline.user_Name"
              placeholder="请输入用户名"
              style="width: 400px; height: 40px"
            ></el-input>
          </el-form-item>
          <el-form-item prop="user_PassWord">
            <el-input
              type="password"
              v-model="formInline.user_PassWord"
              placeholder="请输入密码"
              style="width: 400px; height: 40px"
            ></el-input>
          </el-form-item>
          <el-form-item prop="verification">
            <el-input
              v-model="formInline.inresult"
              placeholder="请输入验证码"
              style="width: 200px; height: 40px"
            ></el-input>
            <el-tag
              v-if="formInline.result"
              style="height: 40px; width: 50px; margin-left: 20px"
              type="primary"
              >{{ formInline.result }}</el-tag
            >
            <el-button
              style="height: 40px; width: 140px; margin-left: 20px"
              type="primary"
              @click="getVerificationCode"
              >获取验证码</el-button
            >
          </el-form-item>
        </el-form>
        <el-link type="primary">快速登录用户</el-link>

        <p style="text-align: center; width: 400px; height: 40px">
          <el-button
            style="height: 40px; width: 100%; margin-top: 30px"
            type="primary"
            @click="Login"
            >登录</el-button
          >
        </p>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { reactive } from "vue";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { FormInstance, FormRules } from "element-plus";
//import QRCode from "qrcodejs2";

const formInline = reactive({
  user_Name: "",
  user_PassWord: "",
  result: "",
  inresult: "",
});

const router = useRouter();

const getVerificationCode = () => {
  axios
    .get("RBAC/GetVerification")
    .then((response) => {
      if (response.data.result) {
        formInline.result = response.data.result;
      } else {
        ElMessage.error("验证码获取失败！");
      }
    })
    .catch((error) => {
      console.error("获取验证码失败：", error);
      ElMessage.error("获取验证码失败！");
    });
};

// const generateQRCode = () => {
//   const url = "YOUR_QR_CODE_CONTENT"; // 生成二维码的内容
//   const qrcode = new QRCode(document.getElementById("qrcode"), {
//     text: url,
//     width: 150,
//     height: 150,
//   });
// };

const Login = (formEl: FormInstance | undefined) => {
  if (formEl) {
    if (formInline.inresult.toLowerCase() === formInline.result.toLowerCase()) {
      // formEl.validate((valid, fields) => {
      // if (valid) {
      axios.post("RBAC/UserLogin", formInline).then((res) => {
        if (res.data.Code == 200) {
          sessionStorage.setItem("user", JSON.stringify(res.data.Data));
          ElMessage.success(res.data.Message);
          router.push("/UserList/eachers");
        } else {
          ElMessage.error(res.data.Message);
        }
      });
      // }
      // });
    } else {
      ElMessage.error("验证码错误，请重新输入！");
    }
  }
};
</script>

<style>
#app {
  background-image: url("./img/MES.jpg"); /* 修改为实际背景图片的路径 */
  background-size: cover;
  background-position: center;
  min-height: 70vh; /* 确保背景铺满整个视口 */
  width: 1300px;
}

.logo-img {
  width: 200px;
  height: 200px;
  margin: 0 auto 20px;
  display: block;
}
.login-container {
  width: 1200px;
  height: 600px;
  margin: 0 auto;
  padding: 50px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: white;
  display: flex;
  justify-content: center;
}
</style>